Widget Exercises

Widget basics

Displaying a widget

Create and display a TextWidget. Change that widget's value and some of it's other properties. Discover the other properties by querying the keys property of the instance.

Hint: You'll need to import from IPython.html.widgets and IPython.display.

Widget list

Selection widget

Create and display one of the selection widgets (dropdown, select, radiobuttons, or togglebuttons). Use the dictionary syntax to set the list of possible values. The values should be "Left" = 0, "Center" = 1, and "Right" = 2. Try reading and setting the value programmatically.

Link

Use a link to link the values of a TextareaWidget and, an HTMLWidget or a LatexWidget. Display the widgets and try typing Latex and HTML in the textarea.

Hint: Look at the Widget Basics notebook for an example of how to use link.

Widget events

on_submit event

Create and display a TextWidget. Use the on_submit event to print the value of the textbox just before you clear the textbox.

Hint: The on_submit callback must accept one argument, the sender.

on_trait_change event

Create and display a TextWidget. Use the on_trait_change method to register a callback that prints the value of the textbox without clearing it. Observe the difference in behavior to Exercise 1.

Widget styling

Colored text

Create and display an HTMLWidget with a value of your choice (i.e. "Hello World"). Use set_css to change that widget's background color and font color.

Vertical sliders

Create an array of 10 or more vertical sliders. Align the sliders using a container so they look like an equalizer.

Hint: Refer to the Widget List notebook for an example of how to display a vertical slider.